<template>
	<div ref="homeChart1" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import { color, borderColor, grid, legend } from './chart-conf';
    import homeMixin from '../../../../mixins/dom-resize';
    export default {
        name: 'Chart1',
        props: {
            chartData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [homeMixin],
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'none'
                        }
                    },
                    color: ['#E04D60', '#A15CFD'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: legend,
                    grid: grid,
                    xAxis: {
                        type: 'category',
                        data: ['12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00'],
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: 'none'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    series: [

                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.homeChart1);
                    this.option.series = [
                        {
                            name: '温度',
                            type: 'line',
                            data: [41, 32, 31, 34, 35, 36, 33],
                            // smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                width: 5
                            }
                        },
                        {
                            name: '湿度',
                            type: 'line',
                            data: [41, 42, 43, 44, 45, 46, 47],
                            // smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                width: 5
                            }
                        }
                    ];
                    this.example.setOption(this.option);
                });
            }
        },
        mounted() {
            this.resize();
        },
        watch: {
            chartData: {
                handler(newVal) {
                    this.initChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
